<template>
	<view class="uni-column">
		<view class="header uni-column">
			<view class="line">
				<view class="martinKey">合约类型</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'" >
				{{previewType=='pagoda'?'宝塔':previewType=='split'?'夹板':'未知'}}{{martinPara.direction=='BUY_LONG'?'开多':martinPara.direction=='BUY_SHORT'?'开空':martinPara.direction=='SELL_SHORT'?'平空':'平多'}}
				</view>				
			</view>		
			<view class="line">
				<view class="martinKey">合约币种</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinPara.instrumentId}}</view>
			</view>
			<view class="line">
				<view class="martinKey">起始价</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinPara.price}}</view>
			</view>
			<view class="line">
				<view class="martinKey">合约张数</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinPara.mount}}</view>
			</view>
			<view class="line">
				<view class="martinKey">杠杠倍数</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinPara.leverage}}</view>
			</view>
		</view>
		<view class="result flex-column" v-if="martinResp!=null">
			<view class="line">
				<view class="martinKey">单量</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinResp.orderNum}}</view>
			</view>
			<view class="line" v-if="previewType!='split'">
				<view class="martinKey">预估价值</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinResp.floorValue}}</view>
			</view>
			<view class="line" v-if="previewType!='split'">
				<view class="martinKey">成本均价</view>
				<view :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{martinResp.floorAvgPrice}}</view>
			</view>
			<view class="line" >
				<view class="martinKey">预算保证金</view>
				<view :class="martinPara.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{martinResp.margin}}</view>
			</view>
			<view class="line" v-if="previewType!='split'">
				<view class="martinKey">预算爆仓价</view>
				<view :class="martinPara.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{martinResp.liquiPrice}}</view>
			</view>
		</view>
		<view class="uni-column" style="min-height: 40vh;" v-if="martinResp!=null&&martinResp.statusFloors!=null">
			<view class="uni-column" v-for="(item,index) in martinResp.statusFloors" :key="index" style="margin-top: 10upx;">
				<view class="pagoda-name" v-if="previewType=='pagoda'">宝塔第{{index}}层</view>
				<view class="pagoda-name" v-else-if="previewType=='split'">夹板开{{item.martin.direction=='BUY_LONG'?'多':'空'}}</view>
				
				<contract-floor class="uni-column" style="display: flex;" :floor="item"></contract-floor>
			</view>
		</view>
		<view v-if="(martinPara.direction=='BUY_LONG'||martinPara.direction=='BUY_SHORT')&&martinResp!=null">
			<view class="resave-box uni-row" v-if="previewType=='pagoda'">
				<view class="uni-column" style="flex: 1;">
					<view>
						<checkbox-group>
							<label style="font-weight: bolder;color:#DD0606 ;">
								<checkbox value="cb" :checked="checkedTrigger" color="#DD0606" style="transform:scale(0.7);" />委托止损:
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="uni-column" style="flex: 2;">
					<view class="flex-row uni-flex igroup">
						<span style="flex: 2;" class="iholder">触发价格:</span>
						<view style="flex: 3;">
							<input v-model="martinResp.triggerPrice" class="iinput" type="digit" />
						</view>
						<span style="flex: 1;" class="iunit">usdt</span>
					</view>
					<view class="flex-row uni-flex igroup">
						<span style="flex: 2;" class="iholder">委托价格:</span>
						<view style="flex: 3;">
							<input v-model="martinResp.algoPrice" class="iinput" type="digit" />
						</view>
						<span style="flex: 1;" class="iunit">usdt</span>
					</view>
				</view>
			</view>
			<view class="resave-box uni-row" v-else-if="previewType=='split'" v-for="(item,index) in martinResp.floors" :key="index">
				<view class="uni-column" style="flex: 1;">
					<view>
						<checkbox-group>
							<label style="font-weight: bolder;color:#DD0606 ;">
								<checkbox value="cb" :checked="checkedTrigger" color="#DD0606" style="transform:scale(0.7);" />
								开{{item.martin.direction=='BUY_LONG'?'多':'空'}}止损:
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="uni-column" style="flex: 2;">
					<view class="flex-row uni-flex igroup">
						<span style="flex: 2;" class="iholder">触发价格:</span>
						<view style="flex: 3;">
							<input v-model="item.triggerPrice" class="iinput" type="digit" />
						</view>
						<span style="flex: 1;" class="iunit">usdt</span>
					</view>
					<view class="flex-row uni-flex igroup">
						<span style="flex: 2;" class="iholder">委托价格:</span>
						<view style="flex: 3;">
							<input v-model="item.algoPrice" class="iinput" type="digit" />
						</view>
						<span style="flex: 1;" class="iunit">usdt</span>
					</view>
				</view>
			</view>
		</view>
		
		<view class="import-tips">
			风险提示: 止损建议未参考持仓和已有挂单
		</view>
		<view @click="createMartinOrder" v-if="previewType=='pagoda'">
			<button class="btn uni-bg-up" style="margin-top: 0px;" v-if="martinPara.direction=='BUY_LONG'">一键开多</button>
			<button class="btn uni-bg-down" style="margin-top: 0px;" v-else-if="martinPara.direction=='SELL_LONG'">一键平多</button>
			<button class="btn uni-bg-down" style="margin-top: 0px;" v-else-if="martinPara.direction=='BUY_SHORT'">一键开空</button>
			<button class="btn uni-bg-up" style="margin-top: 0px;" v-else-if="martinPara.direction=='SELL_SHORT'">一键平空</button>
		</view>
		<view @click="createSplitOrder" v-else-if="previewType=='split'">
			<button class="btn uni-bg-up" style="margin-top: 0px;" v-if="martinPara.direction=='BUY_LONG'">一键下单</button>			
		</view>
	</view>
</template>

<script>
	import contractFloor from "@/components/contractFloor.vue"
	var _self;
	export default {
		components: {
			contractFloor
		},
		data() {
			return {
				martinPara: null,
				martinResp: null,
				checkedTrigger: true,
				previewType:''
			}
		},
		onLoad(e) {
			_self = this
			_self.previewType=e.previewType
			_self.martinPara = JSON.parse(e.martinPara)
			console.log("onload martin " + JSON.stringify(e))
			
		},
		onReady() {
			_self.createTempMartinOrder()
		},
		methods: {
			//===============api action start========================//
			createTempMartinOrder() {
				uni.showLoading({
					title:'加载中'
				})
				console.log("createTempMartinOrder")
				console.log(_self.martinPara)
				uni.request({
					url: _self.api + '/futures/'+this.previewType,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: _self.martinPara,
					success: res => {
						console.log("createTempMartinOrder result")						
						if(res.data.code>200000){
							console.log(res.data.code)
							uni.showModal({
								showCancel: false,
								content: res.data.msg
							})                                                                                                                                                                                                                                                                                                                                                                                                                        
						}else{
						   _self.martinResp = res.data.data	
						}						
					},
					complete() {
						if ((_self.martinPara.direction == 'BUY_LONG' && _self.martinResp.lastPrice < _self.martinResp.liquiPrice) ||
							(_self.martinPara.direction == 'BUY_SHORT' && _self.martinResp.lastPrice > _self.martinResp.liquiPrice))
							uni.showModal({
								showCancel: false,
								content: "高低价之间爆仓!!,请知悉"
							})
						uni.hideLoading()
					}
				});
			},
			createSplitOrder(){
				uni.showModal({
					showCancel: false,
					content: "紧急开发中！！"
				})
			},
			createMartinOrder() {
				console.log("createMartinOrder")
				console.log(_self.martinResp.floorTempId)
				var triggerData = {}
				if (_self.checkedTrigger) {
					triggerData.triggerPrice = _self.martinResp.triggerPrice
					triggerData.algoPrice = _self.martinResp.algoPrice
					if (_self.martinPara.direction == 'BUY_LONG') {
						if (triggerData.triggerPrice * 0.97 > triggerData.algoPrice) {
							uni.showToast({
								title: "委托价小于触发价97%",
								duration: 2000,
								complete() {
									return false
								}
							})
						}
					} else {
						if (triggerData.triggerPrice * 1.03 < triggerData.algoPrice) {
							uni.showToast({
								title: "委托价大于触发价103%",
								duration: 2000,
								complete() {
									return false
								}
							})
						}
					}
				}
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				console.log("check trigger content")
				console.log(triggerData)
				uni.request({
					url: _self.api + '/futures/orders/floor?floorTempId=' + _self.martinResp.floorTempId,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: triggerData,
					success: res => {
						console.log("createMartinOrder result")
						console.log(res.data.data)
						_self.martinResp = res.data.data
					},
					complete() {
						uni.hideLoading()
						uni.$emit('positionFresh')
						uni.navigateBack({
							delta: 1
						})
					}
				});
			}
			//===============api action end========================//
		}
	}
</script>

<style>
	/* view {
		border: #000000 1px solid;
	} */

	.header {
		/* height: 150upx; */
		background-color: #FEF0B7;
		width: 100%;
	}

	.result {
		/* height: 125upx; */
		background-color: #EEFFC5;
		width: 100%;
		border-top: #D76A00 1px solid;
		border-bottom: #D76A00 1px solid;
	}

	.pagoda-name {
		font-size: 30upx;
		padding-left: 20upx;
		font-weight: bold;
	}

	.resave-box {
		border: #AFAFAF 1px solid;
		height: 100upx;
		padding-left: 10upx;
		background-color: #FAFAFA;
	}

	.import-tips {
		height: 40upx;
		font-size: 25upx;
		border: #FF6B6B 1px solid;
		padding-left: 20upx;
		font-weight: bolder;
		color: #FF6B6B;
	}

	.igroup span {
		display: inline-flex;
		align-items: center;
		font-size: 0.8em;
	}

	.iinput {
		text-align: right;
		padding-right: 20upx;
	}

	.iholder {
		color: #898989;
		padding-left: 10upx;
	}

	.iunit {
		color: #898989;
		padding-right: 10upx;
	}

	.igroup {
		border: 1px solid #B4B4B4;
		height: 58upx;
		align-items: center;
		margin-top: 5upx;
	}

	.line {
		height: 30upx;
		justify-content: flex-start;
		width: 100%;
		display: flex;
		padding-left: 20upx;
		display: flex;
		flex-direction: row;
	}

	.martinKey {
		font-size: 20upx;
		color: #918F8F;
		line-height: 30upx;
	}

	.btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.martinValUp {
		font-size: 20upx;
		margin-left: 20upx;
		color: #00B48E;
		line-height: 30upx;
		font-weight: bold;
	}

	.martinValDown {
		font-size: 20upx;
		margin-left: 20upx;
		color: #D14B64;
		line-height: 30upx;
		font-weight: bold;
	}

	.martin-order {
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #DADADA;
	}

	.pmain .item {
		position: relative;
		width: 100%;
		display: flex;
		font-size: 24upx;
		padding-left: 20upx;
	}

	.pmain .item .bg {
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -9999;
	}

	.pmain .item .buybg {
		background: #fdf4f7;
	}

	.pmain .item .sellbg {
		background: #f0faf9;
	}

	.pmain .item .price {
		display: block;
		width: 50%;
		text-align: left;
	}

	.position .item .num {
		display: block;
		width: 50%;
		text-align: right;
		padding-right: 10upx;
	}

	.pmain .current-price {
		margin: 10upx 0;
	}

	.pmain .current-price .usdt {}

	.popover-wrap .uni-thinner-border:before {
		border-radius: 15px !important;
	}
</style>
